<template>
  <div class="albumPageContainer">
    <div class="albumPageInfos">
      <div class="albumPageInfoLeft">
        <div class="albumCover">
          <img :src="playListDetail?.coverImgUrl" alt="" />
        </div>
      </div>
      <div class="albumPageInfoRight">
        <div class="rightGeneral">
          <div class="albumTitle">
            <span class="typeLabel">歌单</span>
            {{ playListDetail?.name }}
          </div>

          <div class="creatorRow">
            <div class="avatarIcon">
              <img :src="playListDetail?.creator.avatarUrl" alt="" />
            </div>
            <span class="nickName">{{ playListDetail?.creator.nickname }}</span>
            <span class="albumCreateDate">{{ albumCreateDate }}创建</span>
          </div>
          <div class="btnRow">
            <div class="filled">
              <SvgIcon
                icon-name="iconbofang"
                color="#fff"
                class-name="mr-5"
                :size="18"
              ></SvgIcon>
              播放全部
            </div>
            <div>
              <SvgIcon
                icon-name="iconwenjianjia"
                color="#333"
                class-name="mr-5"
                :size="18"
              ></SvgIcon>
              收藏
            </div>
            <div>
              <SvgIcon
                icon-name="iconfenxiang"
                color="#333"
                class-name="mr-5"
                :size="18"
              ></SvgIcon>
              分享
            </div>
            <div>
              <SvgIcon
                icon-name="iconxiazai"
                color="#333"
                class-name="mr-5"
                :size="18"
              ></SvgIcon
              >下载全部
            </div>
          </div>

          <div class="othersInfoRow">
            <div class="tagsRow">
              <span class="title">标签：</span>
              <span
                v-for="(t, i) in playListDetail?.tags"
                :key="t"
                class="tagLabel"
                >{{ t
                }}<span
                  class="tagGap"
                  v-if="
                    playListDetail?.tags instanceof Array &&
                    i !== playListDetail?.tags.length - 1
                  "
                  >/</span
                ></span
              >
            </div>
            <div class="easyInfoRow">
              <span class="title">歌曲：</span>
              <span class="mr-15">
                {{ playListDetail?.trackCount }}
              </span>
              <span class="title">播放：</span
              >{{ transPlayCount(playListDetail?.playCount) }}
            </div>
            <div
              class="description"
              :style="{ height: descOpened ? 'auto' : '20px' }"
            >
              <div class="descWrapper" ref="wrapper">
                <span class="title">简介：</span>
                {{ playListDetail?.description }}
              </div>
              <SvgIcon
                v-if="needHide"
                icon-name="iconbofang"
                color="#888"
                :class-name="iconClassName"
                :size="10"
                @icon-click="descOpened = !descOpened"
                F
              ></SvgIcon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="albumPageMiddle">
      <!-- <el-button @click="testRequestAbort">testRequestAbort</el-button> -->
      <div class="tabCont">
        <div
          class="tabItem"
          :class="tabRef === 0 && 'activeTab'"
          @click="tabRef = 0"
        >
          歌曲列表
        </div>
        <div
          class="tabItem"
          :class="tabRef === 1 && 'activeTab'"
          @click="tabRef = 1"
        >
          评论({{ playListDetail?.commentCount || 0 }})
        </div>
        <div
          class="tabItem"
          :class="tabRef === 2 && 'activeTab'"
          @click="tabRef = 2"
        >
          收藏者
        </div>
      </div>
    </div>
    <div class="albumPageBottom" v-if="tabRef === 0">
      <el-table
        style="width: 100%; height: 100%"
        :data="tableData"
        v-loading="tableLoading"
        @cellDblclick="handlePlaySong"
      >
        <el-table-column type="index" width="50">
          <template #default="scope">
            <SvgIcon
              icon-name="iconfill_shengyin"
              :size="14"
              v-if="scope.row.id === playerStore.playingId"
              color="var(--primary-color)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <SvgIcon
              icon-name="iconshoucang"
              :size="16"
              class-name="tableIcon mr-10"
            ></SvgIcon>
            <SvgIcon
              icon-name="iconxiazai1"
              :size="16"
              class-name="tableIcon mr"
            ></SvgIcon>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="标题">
          <template #default="scope">
            <span
              :style="{
                color:
                  scope.row.id === playerStore.playingId
                    ? 'var(--primary-color)'
                    : '#333',
                marginRight: '5px',
              }"
              >{{ scope.row.name }}</span
            >
            <span
              :style="{
                color: '#aaa',
                marginRight: '5px',
              }"
              v-if="(scope.row.alia || [])[0]"
              >({{ (scope.row.alia || [])[0] }})</span
            >
            <SongQualityTagVue
              class="mr-5"
              type="vip"
              v-if="scope.row.copyright === 2"
            />
            <SongQualityTagVue
              type="quality"
              class="mr-5"
              v-if="scope.row.hr || scope.row.sq"
              :quality="scope.row.hr ? 'Hi-Res' : 'SQ'"
            />
            <SongQualityTagVue
              type="mv"
              v-if="scope.row.mv"
              :mvid="scope.row.mv"
            />
          </template>
        </el-table-column>
        <el-table-column label="歌手" width="240">
          <template #default="scope">
            <span
              v-for="(ar, index) in scope.row.ar"
              :key="ar.id"
              class="tableLink"
            >
              <span @click="gotoArtistPage(ar.id)">
                {{ ar.name }}
              </span>
              <span
                v-if="index !== scope.row.ar.length - 1"
                style="margin: 0 2px"
                >/</span
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column label="专辑">
          <template #default="scope">
            <span class="tableLink" @click="gotoAlbumPage(scope.row.id)">
              {{ scope.row.al.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="时长" width="120px">
          <template #default="scope">
            <span>
              {{ formatDt(scope.row.dt) }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div
         v-loading="tableLoading"
          :infinite-scroll-disabled="tableLoading"
        v-infinite-scroll="loadTable"
        style="
          height: 40px;
          background: #fff;
          display: flex;
          justify-self: center;
          align-items: center;
        "
        v-if="tableLoading"
      >
        加载中······
      </div> -->
    </div>
    <div class="pd8" v-if="tabRef === 1">
      <CommentSectionVue
        v-if="commonStore.albumPageId"
        :comment-source="'playlist'"
        :playlist-id="commonStore.albumPageId"
      ></CommentSectionVue>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, computed, ref, watch } from "vue";
import useCommonStore from "@/stores/common";
import { usePlayerStores } from "@/stores/player";
import { formatTime1, transPlayCount, formatDt } from "@/utils/utils";
import { Ar, PlayListSong } from "@/types/album";
import SongQualityTagVue from "@/components/SongQualityTag/SongQualityTag.vue";
import CommentSectionVue from "@/components/CommentSection/CommentSection.vue";

import {
  usePlayListDetail,
  usePlayListDynamicInfo,
  usePlayListTracks,
} from "@/hooks/albumQueryHook";
import SvgIcon from "@/components/common/SvgIcon.vue";

const combineArtistName = (arList: Ar[]) => {
  let names = arList.map((item) => item.name);
  return names.join("/");
};

const wrapper = ref<any>(null);
// commonStore
const commonStore = useCommonStore();
// 播放store
const playerStore = usePlayerStores();
const needHide = ref(false);
const descOpened = ref(false);
const tabRef = ref<number>(0);
const tablePage = ref<number>(0);
const tableData = ref<PlayListSong[]>([]);

//双击播放音乐
const handlePlaySong = (row: any) => {
  playerStore.songDetail(row.id);
  playerStore.play(row.id, "standard");
  if (
    playListDetail?.value?.id &&
    Number(playerStore.playListId) !== Number(playListDetail.value.id)
  ) {
    playerStore.dispatchPlayList(
      tableData.value,
      Number(playListDetail.value.id)
    );
  }
};

const { playListDetail, queryPlayListDetail } = usePlayListDetail();
// const { dynamicInfo, queryDynamicInfo } = usePlayListDynamicInfo();
const { tracks, queryTracks, tableLoading } = usePlayListTracks();

const iconClassName = computed(() => {
  if (descOpened.value === true) {
    return "expandBtn2";
  }
  return "expandBtn";
});

const albumCreateDate = computed(() => {
  return formatTime1(playListDetail?.value?.createTime);
});

/**
 * 去歌手主页 todo
 * @param artistId
 */
const gotoArtistPage = (artistId: number) => {};

/**
 * 去专辑主页
 * @param albumId
 */
const gotoAlbumPage = (albumId: number) => {};

const loadTable = () => {
  queryTracks(commonStore.albumPageId, 20, tablePage.value * 20, () => {
    tablePage.value = tablePage.value + 1;
  });
};

onMounted(() => {
  queryPlayListDetail(Number(commonStore.albumPageId));
  queryTracks(commonStore.albumPageId);
  // queryDynamicInfo(commonStore.albumPageId);
});

watch(
  () => playListDetail?.value?.description,
  (n, o) => {
    if (n) {
      let timer: any = setTimeout(() => {
        if (wrapper?.value?.offsetHeight > 20) {
          needHide.value = true;
        }
        clearTimeout(timer);
        timer = null;
      }, 50);
    }
  }
);

watch(
  () => tracks.value,
  (n, o) => {
    tableData.value = tableData.value.concat(n);
  }
);
</script>

<style scoped lang="less">
.albumPageContainer {
  height: 100%;
  .tableIcon {
    cursor: pointer;
    fill: #999;
    &:hover {
      fill: #444;
    }
  }
  .albumPageInfos {
    display: flex;
    padding: 20px 20px 0;
    .albumPageInfoLeft {
      width: 184px;
      margin-right: 16px;
      .albumCover {
        width: 184px;
        height: 184px;
        border-radius: 6px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .albumPageInfoRight {
      flex: 1;
      .rightGeneral {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .albumTitle {
          .typeLabel {
            margin-right: 4px;
            border: 1px solid;
            border-radius: 3px;
            color: var(--primary-color);
            border-color: var(--primary-color);
            font-size: 14px;
            font-weight: normal;
            padding: 0 2px;
          }
          color: #333;
          font-size: 18px;
          font-weight: bold;
        }
        .creatorRow {
          display: flex;
          align-items: center;
          margin-top: 8px;
          .avatarIcon {
            width: 24px;
            height: 24px;
            overflow: hidden;
            border-radius: 12px;
            img {
              width: 24px;
              height: 24px;
            }
            margin-right: 10px;
          }
          .nickName {
            color: rgb(80, 125, 175);
            font-size: 12px;
            cursor: pointer;
            &:hover {
              color: rgb(11, 88, 176);
            }
            margin-right: 6px;
          }
          .albumCreateDate {
            font-size: 12px;
            color: #777;
          }
        }
        .btnRow {
          display: flex;
          margin: 12px 0;
          align-items: center;
          div {
            display: flex;

            align-items: center;
            height: 32px;
            border-radius: 16px;
            font-size: 14px;
            margin-right: 10px;
            border: 1px solid;
            border-color: var(--primary-color);
            color: #333;
            line-height: 32px;
            padding: 0 16px;
            cursor: pointer;
            &.filled {
              background-color: var(--primary-color);
              color: #fff;
              border: 0;
            }
          }
        }

        .othersInfoRow {
          .title {
            color: #333;
          }
          font-size: 14px;
          color: #555;
          div {
            margin-bottom: 8px;
            &:last-child {
              margin-bottom: 0;
            }
          }
          .description {
            .descWrapper {
              padding-right: 15px;
              line-height: 20px;
            }
            position: relative;
            height: 20px;
            overflow: hidden;
            .expandBtn {
              cursor: pointer;
              position: absolute;
              right: 5px;
              top: 5px;
              transform: rotate(90deg);
            }

            .expandBtn2 {
              cursor: pointer;
              position: absolute;
              right: 5px;
              top: 5px;
              transform: rotate(270deg);
            }
            &.opend {
              height: auto;
            }
          }
        }
        .tagsRow {
          font-size: 14px;
          .tagGap {
            color: #555;
            margin: 0 2px;
          }
          .tagLabel {
            color: rgb(80, 125, 175);
            cursor: pointer;
            &:hover {
              color: rgb(11, 88, 176);
            }
          }
        }
      }
    }
  }

  .albumPageMiddle {
    margin-top: 20px;
    display: flex;
    .tabCont {
      height: 40px;
      cursor: pointer;
      display: flex;
      .tabItem {
        height: 40px;
        padding: 0 10px;
        font-size: 14px;
        color: #444;
        line-height: 40px;
        &.activeTab {
          font-weight: bold;
          font-size: 16px;
          position: relative;
          &:after {
            content: "";
            display: block;
            height: 3px;
            width: 60%;
            background-color: var(--primary-color);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
    .searchCont {
    }
  }
  .albumPageBottom {
    height: calc(100% - 266px);
    padding: 8px;
    // overflow-y: auto;
    .loadingGap {
      height: 26px;
      width: 100%;
    }
  }
  .pd8 {
    padding: 8px;
    height: calc(100% - 266px);
    overflow-y: auto;
  }
  .tableLink {
    cursor: pointer;
    color: #666;
    &:hover {
      color: #333;
    }
  }
}
</style>
